<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试订阅页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 100%;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .header {
            background: linear-gradient(135deg, #07C160 0%, #05a855 100%);
            color: white;
            padding: 25px 20px;
            text-align: center;
        }
        .header h1 {
            font-size: 22px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        .content {
            padding: 25px 20px;
        }
        .form-group {
            margin-bottom: 25px;
        }
        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 16px;
            color: #444;
        }
        select, input[type="time"], input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 2px solid #e1e5eb;
            border-radius: 12px;
            font-size: 16px;
        }
        .services {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        .service-item {
            border: 2px solid #e1e5eb;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }
        .service-item.active {
            border-color: #07C160;
            background: #e9f9ef;
        }
        .submit-btn {
            background: linear-gradient(135deg, #07C160 0%, #05a855 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 18px;
            font-size: 17px;
            font-weight: 600;
            width: 100%;
            cursor: pointer;
            margin-top: 10px;
        }
        #success-message {
            text-align: center;
            padding: 30px;
            color: #28a745;
            display: none;
        }
        .custom-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        .tag {
            background: #e9f9ef;
            color: #07C160;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
        }
        .tab-bar {
            display: flex;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .tab {
            flex: 1;
            text-align: center;
            padding: 15px;
            cursor: pointer;
        }
        .tab.active {
            background: #07C160;
            color: white;
        }
        .page {
            display: none;
        }
        .page.active {
            display: block;
        }
        .history-item {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .history-date {
            font-weight: bold;
            color: #07C160;
            margin-bottom: 5px;
        }
        .history-content {
            color: #666;
            font-size: 14px;
        }
        .switch {
            position: relative;
            width: 50px;
            height: 24px;
            background: #ddd;
            border-radius: 12px;
        }
        .switch.on {
            background: #07C160;
        }
        .switch-handle {
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: all 0.3s;
        }
        .switch.on .switch-handle {
            left: 28px;
        }
    </style>
</head>
<body>
    <div class="tab-bar">
        <div class="tab active" data-tab="subscribe">订阅服务</div>
        <div class="tab" data-tab="history">推送历史</div>
        <div class="tab" data-tab="settings">账号设置</div>
    </div>

    <!-- 订阅服务页面 -->
    <div class="page active" id="subscribe-page">
        <div class="container">
            <div class="header">
                <a class="back-btn" href="javascript:void(0)"><i class="fas fa-cog"></i></a>
                <h1><i class="fas fa-bell"></i> 智慧生活推送服务</h1>
                <p>定制您的专属每日资讯</p>
            </div>
            
            <div class="content">
                <div class="notification">
                    <p><strong>服务号专属功能</strong>：您可随时接收推送，无需重复订阅，消息直达微信聊天列表。</p>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-city"></i> 选择城市</label>
                    <div class="city-selector">
                        <select id="province">
                            <option value="">选择省份</option>
                        </select>
                        <select id="city">
                            <option value="">选择城市</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label><i class="fas fa-check-circle"></i> 订阅服务</label>
                    <div class="services">
                        <div class="service-item active" data-service="weather">
                            <div class="service-icon">🌤️</div>
                            <div class="service-name">天气预报</div>
                            <div class="service-desc">每日天气情况</div>
                        </div>
                        <div class="service-item active" data-service="traffic">
                            <div class="service-icon">🚗</div>
                            <div class="service-name">限行信息</div>
                            <div class="service-desc">车辆限行提醒</div>
                        </div>
                        <div class="service-item" data-service="news">
                            <div class="service-icon">📰</div>
                            <div class="service-name">每日新闻</div>
                            <div class="service-desc">本地热点新闻</div>
                        </div>
                        <div class="service-item" data-service="tips">
                            <div class="service-icon">💡</div>
                            <div class="service-name">生活提示</div>
                            <div class="service-desc">实用生活信息</div>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label><i class="fas fa-clock"></i> 推送时间</label>
                    <div class="time-selector">
                        <input type="time" value="07:30">
                        <span>每日定时推送</span>
                    </div>
                </div>
                
                <div class="form-group">
                    <label><i class="fas fa-edit"></i> 自定义内容</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" id="custom-input" placeholder="输入您想订阅的特定内容...">
                        <button style="white-space: nowrap; padding: 0 15px; background: #07C160; color: white; border: none; border-radius: 8px;" onclick="addCustomTag()">添加</button>
                    </div>
                    <div class="custom-tags" id="custom-tags">
                        <!-- 自定义标签会动态添加到这里 -->
                    </div>
                </div>
                <button class="submit-btn" id="subscribe-btn"><i class="fas fa-check"></i> 保存设置</button>

                <div id="success-message" class="hidden">
                    <i class="fas fa-check-circle"></i>
                    <h2>设置已保存！</h2>
                    <p>您的订阅偏好已更新</p>
                    <p>明天开始您将在指定时间收到推送</p>
                </div>
                <div class="footer">
                    <p>服务号专属功能 · 消息直达聊天列表</p>
                    <p>可随时通过公众号菜单修改设置</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 推送历史页面 -->
    <div class="page" id="history-page">
        <div class="container">
            <div class="header">
                <h1><i class="fas fa-history"></i> 推送历史</h1>
                <p>最近收到的推送消息</p>
            </div>
            
            <div class="content" id="history-content">
                <!-- 历史记录将通过JS动态加载 -->
            </div>
        </div>
    </div>

    <!-- 账号设置页面 -->
    <div class="page" id="settings-page">
        <div class="container">
            <div class="header">
                <h1><i class="fas fa-user-cog"></i> 账号设置</h1>
                <p>管理您的账户和推送偏好</p>
            </div>
            
            <div class="content">
                <div class="form-group">
                    <label>推送设置</label>
                    <div style="background: #f8f9fa; padding: 15px; border-radius: 12px;">
                        <label style="display: flex; justify-content: space-between; align-items: center;">
                            <span>启用推送通知</span>
                            <div class="switch on">
                                <div class="switch-handle"></div>
                                <input type="checkbox" checked style="display: none;">
                            </div>
                        </label>
                        <label style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
                            <span>免打扰时段 (23:00-07:00)</span>
                            <div class="switch on">
                                <div class="switch-handle"></div>
                                <input type="checkbox" checked style="display: none;">
                            </div>
                        </label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>推送设置</label>
                    <button class="submit-btn" id="save-settings-btn"><i class="fas fa-check"></i> 保存设置</button>
                </div>
                
                <div class="form-group">
                    <label>数据管理</label>
                    <button class="submit-btn" style="background: #576b95;"><i class="fas fa-download"></i> 导出我的数据</button>
                    <button class="submit-btn" style="background: #ff6b6b; margin-top: 10px;"><i class="fas fa-trash-alt"></i> 删除所有数据</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面切换逻辑
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                const tabName = this.getAttribute('data-tab');
                document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
                document.getElementById(tabName + '-page').classList.add('active');
                
                // 加载对应页面数据
                if(tabName === 'history') {
                    loadHistory();
                } else if(tabName === 'settings') {
                    loadUserSettings();
                }
            });
        });

        // 服务选择交互
        document.querySelectorAll('.service-item').forEach(item => {
            item.addEventListener('click', function() {
                this.classList.toggle('active');
            });
        });

        // 添加自定义标签
        function addCustomTag() {
            const input = document.getElementById('custom-input');
            const value = input.value.trim();
            
            if (value) {
                const tagsContainer = document.getElementById('custom-tags');
                const tag = document.createElement('div');
                tag.className = 'tag';
                tag.textContent = value;
                tagsContainer.appendChild(tag);
                input.value = '';
            }
        }

        // 开关交互
        document.querySelectorAll('.switch').forEach(switchEl => {
            switchEl.addEventListener('click', function() {
                const checkbox = this.querySelector('input[type="checkbox"]');
                checkbox.checked = !checkbox.checked;
                this.classList.toggle('on');
            });
        });

        // 加载城市数据
        function loadCityData() {
            console.log('开始加载城市数据...');
            fetch('/wechat/city-data')
                .then(response => response.json())
                .then(data => {
                    const provinceSelect = document.getElementById('province');
                    const citySelect = document.getElementById('city');
                    
                    // 清空选项
                    provinceSelect.innerHTML = '<option value="">选择省份</option>';
                    citySelect.innerHTML = '<option value="">选择城市</option>';
                    
                    // 填充省份数据
                    data.data.provinces.forEach(province => {
                        const option = document.createElement('option');
                        option.value = province.code;
                        option.textContent = province.name;
                        provinceSelect.appendChild(option);
                    });
                    
                    // 省份选择变化事件
                    provinceSelect.addEventListener('change', function() {
                        const provinceCode = this.value;
                        citySelect.innerHTML = '<option value="">选择城市</option>';
                        
                        if (provinceCode) {
                            const selectedProvince = data.data.provinces.find(p => p.code === provinceCode);
                            if (selectedProvince) {
                                selectedProvince.cities.forEach(city => {
                                    const option = document.createElement('option');
                                    option.value = city.code;
                                    option.textContent = city.name;
                                    citySelect.appendChild(option);
                                });
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('加载城市数据失败:', error);
                });
        }

        // 加载用户设置
        function loadUserSettings() {
            fetch('/wechat/user-settings?openid=test_user')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        // 设置推送通知开关
                        const pushSwitch = document.querySelector('#settings-page .switch');
                        if (data.data.pushEnabled) {
                            pushSwitch.classList.add('on');
                        } else {
                            pushSwitch.classList.remove('on');
                        }
                        
                        // 设置免打扰时段开关
                        const quietHoursSwitch = document.querySelector('#settings-page .switch ~ .switch');
                        if (data.data.quietHoursEnabled) {
                            quietHoursSwitch.classList.add('on');
                        } else {
                            quietHoursSwitch.classList.remove('on');
                        }
                    }
                })
                .catch(error => {
                    console.error('加载用户设置失败:', error);
                });
        }

        // 加载推送历史
        function loadHistory() {
            const historyContent = document.getElementById('history-content');
            historyContent.innerHTML = '<div style="text-align: center; padding: 30px; color: #888;">加载中...</div>';
            
            fetch('/wechat/push-history?openid=test_user')
                .then(response => response.json())
                .then(data => {
                    historyContent.innerHTML = '';
                    
                    if(data.code === 200 && data.data && data.data.length > 0) {
                        data.data.forEach(item => {
                            const historyItem = document.createElement('div');
                            historyItem.className = 'history-item';
                            historyItem.innerHTML = `
                                <div class="history-date">${item.time}</div>
                                <div class="history-content">${item.content}</div>
                            `;
                            historyContent.appendChild(historyItem);
                        });
                    } else {
                        historyContent.innerHTML = '<div style="text-align: center; padding: 30px; color: #888;">暂无推送历史</div>';
                    }
                })
                .catch(error => {
                    console.error('加载推送历史失败:', error);
                    historyContent.innerHTML = '<div style="text-align: center; padding: 30px; color: #888;">加载推送历史失败</div>';
                });
        }

        // 保存账号设置
        document.getElementById('save-settings-btn').addEventListener('click', function() {
            const pushEnabled = document.querySelector('#settings-page .switch.on') !== null;
            const quietHoursEnabled = document.querySelector('#settings-page .switch.on ~ .switch.on') !== null;
            const quietHoursStart = '23:00'; // 可以从时间选择器获取实际值
            const quietHoursEnd = '07:00';   // 可以从时间选择器获取实际值
            
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
            
            fetch('/wechat/save-settings', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    pushEnabled: pushEnabled,
                    quietHoursEnabled: quietHoursEnabled,
                    quietHoursStart: quietHoursStart,
                    quietHoursEnd: quietHoursEnd
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    this.innerHTML = '<i class="fas fa-check"></i> 保存成功';
                    setTimeout(() => {
                        this.innerHTML = '<i class="fas fa-check"></i> 保存设置';
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('保存设置失败:', error);
                this.innerHTML = '<i class="fas fa-exclamation-circle"></i> 保存失败';
                setTimeout(() => {
                    this.innerHTML = '<i class="fas fa-check"></i> 保存设置';
                }, 2000);
            });
        });

        // 提交订阅
        document.getElementById('subscribe-btn').addEventListener('click', function() {
            const city = document.getElementById('city').value;
            const time = document.getElementById('push-time').value;
            
            // 获取选中的服务
            const selectedServices = [];
            document.querySelectorAll('.service-item.active').forEach(item => {
                selectedServices.push(item.getAttribute('data-service'));
            });
            
            // 获取自定义标签
            const customTags = [];
            document.querySelectorAll('.tag').forEach(tag => {
                customTags.push(tag.textContent);
            });

            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
            
            // 发送数据到后端
            fetch('/wechat/test-subscribe', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    city: city,
                    pushTime: time,
                    services: selectedServices,
                    customTags: customTags
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    document.getElementById('success-message').style.display = 'block';
                    this.innerHTML = '<i class="fas fa-check"></i> 保存订阅';
                    
                    // 3秒后隐藏成功消息
                    setTimeout(() => {
                        document.getElementById('success-message').style.display = 'none';
                    }, 3000);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                this.innerHTML = '<i class="fas fa-exclamation-circle"></i> 保存失败';
            });
        });
   
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadCityData();  // 这里已经正确调用了
            // 其他初始化代码...
        });
   
   </script>
</body>
</html>